<template>
  <div class="search-index">
    <!-- search 头部 nav -->
    <van-nav-bar
      title="商品搜索"
      left-arrow
      @click-left="onClickLeft"
    />
    <!-- 搜索框 -->
    <form action="/">
      <van-search
        v-model="searchValue"
        show-action
        placeholder="请输入搜索关键词"
        @search="onSearch"
        >
        <template #action>
          <div @click="onSearch(searchValue)">搜索</div>
        </template>
      </van-search>
    </form>
    <!-- 搜索结果展示 -->
    <div class="search-result px-3 py-2" v-if="history.length > 0">
      <div class="search-result-title d-flex justify-content-between align-items-center">
        <p class="text-black-50 mb-0">最近搜索</p>
        <i class="iconfont icon-shanchu" @click="clearHistory"></i>
      </div>
      <div class="search-result-list">
        <div class="list-item" v-for="item in history" :key="item" @click="onSearch(item)">{{item}}</div>
      </div>
    </div>
  </div>
</template>

<script>
import { getSearchHistory, setSearchHistory } from '@/utils/storage'

export default {
  name: 'SearchIndex',
  data () {
    return {
      searchValue: '',
      history: getSearchHistory()
    }
  },
  methods: {
    onClickLeft () {
      this.$router.push('/')
    },
    onSearch (key) {
      const index = this.history.indexOf(key)
      // 如果搜索过，则删除原有记录
      if (index !== -1) {
        this.history.splice(index, 1)
      }
      // 若没有搜索过，则插入到最前面
      this.history.unshift(key)
      // 只保留最近10条记录
      if (this.history.length > 10) {
        this.history = this.history.slice(0, 10)
      }
      setSearchHistory(this.history)

      // 跳转到搜索结果页面
      this.$router.push(`/searchlist?search=${key}`)
    },
    clearHistory () {
      this.history = []
      setSearchHistory(this.history)
    }
  }
}
</script>

<style lang="less" scoped>
   .search-index{
    display: flex;
    flex-direction: column;
    height: 100%;
    background-color: #f7f8fa;
    min-height: 100vh; // 确保容器铺满全屏
    ::v-deep {
      .van-nav-bar,
      .van-search {
        flex-shrink: 0; // 禁止顶部区域被压缩
      }
    }
    ::v-deep{
      // 头部nav样式, 字体加粗
      .van-nav-bar{
        .van-nav-bar__title{
          font-weight: 600;
        }
      }
      // 搜索框样式
      .van-search{
        background-color: #f7f8fa;
        display: flex;
        gap: 0; // 去掉默认的间隔
        .van-search__content{
          background-color: #fff;
          border-radius: 10px 0 0 10px;
          flex:1 1 0%;
        }
        .van-search__action{
          flex: 0 0 20%; // 防止按钮过小
          background-color: #ff0036;
          color: #fff;
          font-size: 16px;
          font-weight: 500;
          text-align: center;
          border-radius: 0 10px 10px 0;
        }
      }
      .van-search--show-action {
        padding-right: 12px;
      }
    }
    // 搜索结果展示样式
    .search-result{
      flex: 1;
      width: 100%;
      min-height: 0;  /* 关键修复：允许内容区域收缩 */
      overflow-y: auto; /* 当内容溢出时显示滚动条 */
      background-color: #f7f8fa;
      padding:15px 0;
      .search-result-title{
        margin-bottom: 10px;
          font-size: 14px;
          .iconfont{
            font-size: 18px;
          }
      }
      .search-result-list{
        display: flex;
        justify-content: space-between; // 两端对齐
        flex-wrap: wrap; // 换行
        gap: 10px; // 间隔
        &::after{
          content: "";
          flex: auto; //添加一个伪类元素平衡最后一行的项目
        }
        .list-item{
          width: 100%;
          background-color: #fff;
          font-size: 14px;
          padding: 5px 10px;
          border-radius: 20px;
          text-align: center;
          flex:1 1 calc(50% - 20px); //每个子项占据大约50%的宽度，减去间隔的一半
          box-sizing: border-box; // 防止子项内容溢出
      }
    }
  }
  // 实现移动端100vh兼容方案，可以考虑在CSS中添加
  min-height: 100dvh; /* 使用现代视口单位 */
  @supports not (min-height: 100dvh) {
    min-height: 100vh;
  }
}
</style>
